<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>湖南省自来水公司营销管理信息系统</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title"/>

    <link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen"
          title="no title"/>
    <link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title"/>

    <link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen" title="no title">
    <script src="/webjars/vue/2.5.17/dist/vue.js"></script>
    <script src="../layui/layui.all.js"></script> <style>
    .disabled{
        /*cursor:not-allowed;*/
        pointer-events: none;
        /*//  display: none;*/
    }
</style>
    
</head>

<body>

<div id="wrapper">

    <div id="bool"><script>window.onload=function (){  $("#bool").load("../ming.html");}</script></div>


    <div id="content" class="xgrid">

        <div class="x12">

            <h2>收费情况报表</h2>
            <div class="searchDiv">
                <div style="float:left;width:200px;">用户编码 <input type="text" v-model="userNo"/></div>
                收费日期 <span class="between">
							<input type="date" v-model="minDate"/>
							<label>至</label>
				<input type="date" v-model="maxDate"/>
						</span>
                <br/>

                <div style="float:left;width:200px;">收费人员 <select class="medium" id="empid">
                    <option selected="selected" value="0">所有</option>
                    <option v-for="emp in empList" :value="emp.id">{{emp.empNmae}}</option>
                </select>
                </div>
                发票号码 <span class="between">
							<input type="text" v-model="minInvoice"/>
							<label>至</label>
				       <input type="text" v-model="maxInvoice"/>
						</span>

                <button class="btn btn-small btn-icon btn-find" @click="findBy()"><span></span>查询</button>
            </div>
            <br/><br/>

            <div class="reportTitle">
                收费情况报表
            </div>
            <div class="height24">
                <div style="float:left;">合计交费金额：5830123.45 元</div>
            </div>
            <table class="report">
                <thead>
                <tr>
                    <th width="100">用户编码</th>
                    <th>用户姓名</th>
                    <th width="160">交费单号</th>
                    <th width="80">发票号</th>
                    <th width="100">交费金额</th>
                    <th width="80">交费日期</th>
                    <th width="100">已用金额</th>
                    <th width="100">剩余金额</th>
                    <th width="80">收费员</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="pay in PyPayList">
                    <td class="center" v-text="pay.usUser.userno"></td>
                    <td class="left" v-text="pay.usUser.username"></td>
                    <td class="center" v-text="pay.payNo"></td>
                    <td class="center" v-text="pay.invoice"></td>
                    <td class="right" v-text="pay.payMoney"></td>
                    <td class="right" v-text="pay.payDate"></td>
                    <td class="right" v-text="pay.payMoney"></td>
                    <td class="right" v-text="pay.useMoney"></td>
                    <td class="center" v-text="pay.syEmp.empNmae"></td>
                </tr>
                </tbody>
            </table>
            <div class="page">
                <a href="javascript:;" @click="findBy(1)">第一页</a>
                <a href="javascript:;" @click="findBy(pypayPage.current-1)" :class=" pypayPage.current == 1 ? 'disabled' : ''">上一页</a>
                <input class="pageCount" value="7" v-model="pypayPage.current"/> / <input class="pageCount" readonly="readonly"
                                                                                     v-model="pypayPage.pages"/>
                <a href="javascript:;" :class=" pypayPage.current == pypayPage.pages ? 'disabled' : ''" @click="findBy(pypayPage.current+1)">下一页</a>
                <a href="javascript:;" @click="findBy(pypayPage.pages-0)">第末页</a>
            </div>

        </div> <!-- .x12 -->

    </div> <!-- #content -->

    <div id="footer">
        <div class="content_pad">
            <p>&copy; 2013-11 版权所有 <a href="#">湖南省自来水公司</a>. 技术支持 <a href="#">职业教育</a>.</p>
        </div> <!-- .content_pad -->
    </div> <!-- #footer -->

</div> <!-- #wrapper -->
<script>
    //条件查询交费单信息
    function findAll(userNo, empId, minDate, maxDate, minInvoice, maxInvoice,page,pageSize) {
        var index = layer.load(0, {shade: false});
        $.ajax({
            type: 'POST',
            url: "/py-pay/pageQuery",
            data: {
                "userNo": userNo,
                "empId": empId,
                "minDate": minDate,
                "maxDate": maxDate,
                "minInvoice": minInvoice,
                "maxInvoice": maxInvoice,
                "page":page,
                "pageSize":pageSize,
            },
            dataType: 'json',
            success: function (json) {
                if (json.code == 200) {
                    app.pypayPage = json.data.pypayPage;
                    app.PyPayList = json.data.pypayPage.records
                } else {
                    layer.msg(json.message, {icon: 2})
                }
                layer.close(index);
            },
        });
    }

    //查询所有收费部员工
    function findAllEmp() {
        $.ajax({
            type: 'GET',
            url: "/py-pay/findAllEmp",
            // data:,
            dataType: 'json',
            success: function (json) {
                if (json.code == 200) {
                    app.empList = json.data.empList;
                } else {
                    layer.msg(json.message, {icon: 2})
                }
            },
        });
    }

    var $ = layui.jquery,
        layer = layui.layer,
        form = layui.form;
    table = layui.table;
    var app = new Vue({
        el: "#wrapper",
        data: {
            pypayPage: '',//收费情况集合
            PyPayList: '',//交费单集合
            empList: '',//员工集合
            userNo: '',//用户编号
            empId: '',//员工编号
            minDate: '',//起始时间
            maxDate: '',//截止时间
            minInvoice: '',//起始发票号码
            maxInvoice: '',//截止发票号码
        }, methods: {

            //条件查询
            findBy(page,pageSize) {
                app.empId = $("#empid").val();
                findAll(app.userNo, app.empId, app.minDate, app.maxDate, app.minInvoice, app.maxInvoice,page,pageSize);
            },
        },
        created() {
            findAllEmp();
            findAll();
        },
    });
</script>
<script src="../js/jquery/jquery-1.5.2.min.js"></script>
<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>

<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        Dashboard.init();

    });


</script>

</body>

</html>